<!DOCTYPE html>

<html class="no-js">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/cvue.js"></script>

</head>

<body>
    <div id="app">
        <cvue-btn :btn="btn1"></cvue-btn>
        <cvue-btn :btn="btn2"></cvue-btn>
        <cvue-btn :btn="btn3"></cvue-btn>
        <cvue-btn :btn="btn4"></cvue-btn>
        <cvue-btn :btn="btn5"></cvue-btn>
        <cvue-btn :btn="btn6"></cvue-btn>
    </div>
</body>
<script>

    new Vue({
        el: '#app',
        data() {
            return {
                btn1: {
                    type: 'primary',
                    icon: 'el-icon-edit',
                    plain: true,
                    text: 'hello'
                },
                btn2: {
                    type: 'primary',
                    size: 'mini',
                    plain: true,
                    text: 'great'
                },
                btn3: {
                    type: 'primary',
                    icon: 'el-icon-edit',
                    round: true,
                    loading: true,
                    size: 'small',
                    text: 'hi'
                },
                btn4: {
                    type: 'primary',
                    icon: 'el-icon-edit',
                    disabled: true,
                },
                btn5: {
                    type: 'text',
                    text: 'good'
                },
                btn6: {
                    group: true,
                    children: [
                        {
                            type: 'primary',
                            icon: 'el-icon-arrow-left',
                            text: '上一页'
                        },
                        {
                            type: 'primary',
                            icon: 'el-icon-arrow-right',
                            text: '下一页'

                        }
                    ]
                },
            }
        },
        methods: {

        },
    })
</script>

</html>